<template>
  <div class="daychance">
    <div class="bigCartTop" v-if="daychance">
      <div
        class="content"
        v-for="item in daychance"
        :key="item.children[0].model.resource.id"
      >
        <div class="head">
          <div class="left">
            <div
              class="heads"
              :style="{
                'background-image':
                  'url(' +
                  item.children[0].model.resource.author.userinfo.avatar +
                  ')',
              }"
            >
              <!-- 背景图片 -->
            </div>
            <div class="vip">
              <img src="../assets/img/O_1.png" alt="" />
            </div>
            <div class="name">
              {{ item.children[0].model.resource.author.userinfo.username }}
            </div>
          </div>
          <div class="right">
            <div class="gzhu">
              <img src="../assets/img/add.png" alt="" />
              <span>关注</span>
            </div>
            <!-- <div class="havegzhu">
          <span>已关注</span>
        </div> -->
            <div class="share">
              <img src="../assets/img/Zk1.png" alt="" />
            </div>
          </div>
        </div>
        <div class="title">
          <p>{{ item.children[0].model.resource.title }}</p>
        </div>
        <router-link tag="div" :to="'/homeitem?reid='+item.children[0].model.resource.id" class="cover">
          <img :src="item.children[0].model.resource.cover" alt="" />
        </router-link>
        <div class="looknum">
          <p>
            {{ item.children[0].model.resource.count.count_view | looknum }}观看
            | {{item.children[0].model.resource.duration|playerTime}}
          </p>
        </div>
        <div class="bar">
          <div class="collection">
            <img src="../assets/img/28.png" alt="" />
            <span>{{
              item.children[0].model.resource.count.count_collect
            }}</span>
          </div>
          <div class="comments">
            <img src="../assets/img/Ac1.png" alt="" />
            <span>{{
              item.children[0].model.resource.count.count_comment
            }}</span>
          </div>
          <div class="likes">
            <img src="../assets/img/like.png" alt="" />
            <span>{{ item.children[0].model.resource.count.count_like }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
    export default {
      data() {
        return {
          daychance:null,
        }
      },
      methods: {
        getDaychanceFun(){
         // https://apis.netstart.cn/xpc/home/selection
        axios.get("https://apis.netstart.cn/xpc/home/selection").then((data) => {
        var daychanceList=data.data.data.children
     
        this.daychance=daychanceList.filter(item=>item.type=='uiBigCard')
        console.log(this.daychance);
        // console.log(data);
      });
    }
      },
      created() {
        this.getDaychanceFun()
      },
       filters:{
       looknum(value){
        if (value>10000) {
           return  Number(value/10000).toFixed(1)+'w'
        }
    },
     playerTime(data) {
          let m = parseInt(data / 60); //分钟
          let s = parseInt(data % 60); //秒
        
        return (m >10? m: "0" + m) +"'"+ (s <10 ? "0" + s : s)+"''"; 
         
       },  
   }

      
    }
</script>

<style lang="less" scoped>
.daychance {
  .bigCartTop {
    width: 95%;
    margin: 0 auto;
    margin-top: 55px;
    .content {
      width: 100%;
      margin: 0 auto;
      margin-top: 10px;
      margin-bottom: 10px;
      overflow: hidden;
      border-radius: 8px;
      background-color: rgb(255, 255, 255);
      position: relative;
      .head {
        width: 100%;
        background-color: #fff;

        display: flex;
        justify-content: space-between;
        padding: 10px 0px;
        border-bottom: 2px solid #f2f2f2;
        .left {
          display: flex;
          align-items: center;
          position: relative;
          .heads {
            border-radius: 50%;
            // background-image: url(../assets/img/test.png);
            width: 30px;
            height: 30px;
            background-size: cover;
            background-repeat: no-repeat;
            margin-right: 10px;
            margin-left: 10px;
          }
          .vip {
            position: absolute;
            top: 18px;
            left: 30px;
            img {
              width: 12px;
            }
          }
          .name {
            font-size: 13px;
            font-weight: 600;
          }
        }
        .right {
          display: flex;
          align-items: center;
          .gzhu {
            display: flex;
            align-items: center;
            padding: 1px 12px;
            margin-right: 20px;

            border-radius: 15px;

            img {
              width: 8px;
              height: 8px;
              margin-right: 5px;
            }
            span {
              font-size: 14px;
              color: salmon;
            }
          }
          .havegzhu {
            padding: 1px 12px;
            margin-right: 20px;
            border: 1px solid f2f2f2;
            border-radius: 15px;

            span {
              font-size: 14px;
              color: gray;
            }
          }
          .share {
            margin-right: 10px;
            img {
              width: 15px;
              height: 15px;
            }
          }
        }
      }
      .title {
        padding: 10px 0px;
        padding-left: 10px;
        p {
          font-weight: 600;
        }
      }
      .cover {
        width: 100%;

        img {
          width: 100%;
          height: 200px;
        }
      }
      .looknum {
        position: absolute;
        bottom: 50px;
        right: 15px;
        z-index: 50;
        p {
          text-align: end;
          color: #dadada;
          font-size: 14px;
        }
      }
      .bar {
        display: flex;
        justify-content: space-around;
        padding: 10px 0px;
        .collection,
        .comments,
        .likes {
          display: flex;
          align-items: center;
          span {
            display: block;
            color: gray;
            font-size: 14px;
          }
          img {
            width: 15px;
            margin-right: 10px;
          }
        }
      }
    }
  }
}
</style>